<script setup>
import {
    Avatar as ElAvatar,
    HomeFilled as ElHomeFilled,
} from '@element-plus/icons';
</script>

<template>
    <div class="layout">
        <div class="head">

        </div>
        <div class="body">
            <div class="side">
                <el-menu router :default-active="$route.path">
                    <el-menu-item index="/">
                        <el-home-filled class="el-icon-location" />
                        <template #title>首页</template>
                    </el-menu-item>

                    <el-sub-menu index="user-manage">
                        <template #title>
                            <el-avatar class="el-icon-location" />
                            <span>用户管理</span>
                        </template>
                        <el-menu-item index="/users">用户列表</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </div>

            <div class="main"><router-view></router-view></div>
        </div>
    </div>
</template>

<style scoped>
.el-menu {
    border-right: none;
    background-color: transparent;
}
.layout {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.head {
    height: 40px;
    flex-shrink: 0;
    background-color: #324057;
    box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
}
.body {
    flex: auto;
    display: flex;
    overflow: hidden;
}
.side {
    width: 200px;
    flex-shrink: 0;
}
.main {
    flex: auto;
    overflow: auto;
}
</style>
